<template>
    <div class="home">
        <el-aside class="aside" :width="isCollapse?'70px':'220px'">
            <div class="logo">{{isCollapse?'V':'Vue Test'}}</div>
            <el-menu :collapse="isCollapse" router :default-active="$route.path" class="el-menu-vertical-demo"
                background-color="#304156" text-color="#fff" active-text-color="#409eff">
                <el-menu-item index="/first_page">
                    <i class="el-icon-menu"></i>
                    <span slot="title">首页</span>
                </el-menu-item>
                <MenuNav v-for="(item,index) in menuList" :key="index" :config-data="item"></MenuNav>
            </el-menu>
        </el-aside>
        <div class="right">
            <header>
                <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'" @click="isCollapse=!isCollapse"></i>
                <span>用户</span>
            </header>
            <div class="leables">
                    <span class="leables-first" :class=" $route.path=== '/first_page' ? 'active' : ''">
                        <router-link to="/first_page">首页</router-link>
                    </span>
                    <Leables v-for="(item,index) in tableList" :key="index" :names="item" @removeTable="removeTable" />
                </div>
            <div class="content">

                <div class="router-view">
                    <router-view></router-view>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { Aside, Menu, MenuItem } from 'element-ui'
import Leables from './Leables'
import MenuNav from '@/components/MenuNav'
import { menuList } from '@/router/menu'
export default {
    components: {
        Leables,
        MenuNav,
        ElAside: Aside,
        ElMenu: Menu,
        ElMenuItem: MenuItem
    },
    data () {
        return {
            isCollapse: false,
            tableList: [],
            menuList: menuList
        }
    },
    methods: {
        removeTable (tag) {
            for (let i = 0; i < this.tableList.length; i++) {
                if (this.tableList[i].path === tag) {
                    this.tableList.splice(i, 1)
                }
            }
            if (this.$route.path === tag) {
                if (this.tableList.length > 0) {
                    this.$router.push(this.tableList[this.tableList.length - 1].path)
                } else {
                    this.$router.push('/first_page')
                }
            }
        }
    },
    created () {
        console.log(this.$route)
    },
    watch: {
        '$route': {
            handler (value, oldValue) {
                console.log(value.meta)
                let offs = this.tableList.every((item, index) => {
                    return item.path !== value.path // 确保tableList中没有此路由
                })
                if (offs && value.path !== '/first_page') {
                    this.tableList.push(value) // 添加到tableList
                }
            },
            immediate: true // 立即执行handler
        }
    }
}
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 220px;
    min-height: 400px;
}
</style>
<style lang="less" scoped>
@import './index.less';
</style>
